<template>
  <!-- 列设置 -->
  <el-drawer v-model="drawerVisible" title="列设置" size="450px">
    <div class="table-main">
      <el-table
        :data="cols"
        ref="colTableRef"
        :border="true"
        row-key="prop"
        default-expand-all
        :tree-props="{ children: '_children' }"
      >
        <el-table-column prop="sortable" align="center" label="排序">
          <template #default>
            <el-tag class="move">
              <el-icon>
                <DCaret />
              </el-icon>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="label" align="center" label="列名" />
        <el-table-column v-if="showColSettingShow" v-slot="scope" prop="isShow" align="center" label="显示">
          <el-switch v-model="scope.row.isShow" @change="saveUserCustomizedColumnInfo()"></el-switch>
        </el-table-column>

        <template #empty>
          <div class="table-empty">
            <img src="@/assets/images/notData.png" alt="notData" />
            <div>暂无可配置列</div>
          </div>
        </template>
      </el-table>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="ColSetting">
import { computed, inject, ref, watch } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import Sortable from "sortablejs";

const props = defineProps<{ colSetting: ColumnProps[] }>();

const cols = computed(() => {
  return props.colSetting;
});

const showColSettingShow = inject("showColSettingShow", true);

const drawerVisible = ref<boolean>(false);

const openColSetting = () => {
  drawerVisible.value = true;
};

const saveUserCustomizedColumnInfo = inject("saveUserCustomizedColumnInfo", () => 0);
const sortColumns = inject("sortColumns", (a: number, b: number) => 0);

const colTableRef = ref();
watch(colTableRef, () => {
  const el = colTableRef?.value?.$el.querySelector("tbody");
  Sortable.create(el, {
    handle: ".move",
    ghostClass: "blue-background-class",
    onEnd({ newIndex, oldIndex }) {
      if (newIndex != oldIndex) {
        sortColumns(newIndex, oldIndex);
      }
    }
  });
});

defineExpose({
  openColSetting
});
</script>

<style scoped lang="scss">
.cursor-move {
  cursor: move;
}
</style>
